<template>
  <div class="app">
    <!-- border	是否显示下边框	boolean	true fixed	是否固定在顶部	boolean	false -->
    <!-- placeholder v2.5.9	固定在顶部时，是否在标签位置生成一个等高的占位元素	boolean	false -->
    <!-- z-index	导航栏 z-index	number | string	1 -->
    <!-- safe-area-inset-top v2.10.13	是否开启顶部安全区适配	boolean	false -->
    <van-nav-bar
      :title="title"
      left-text="返回"
      left-arrow
      border
      fixed
      @click-left="onClickLeft"
    />

    <!-- 路由可以直接用单标签 -->
    <router-view />

    <!-- v-model 默认绑定选中标签的索引值，通过修改 v-model 即可切换选中的标签。 -->
    <!-- 在标签指定 name 属性的情况下，v-model 的值为当前标签的 name -->
    <!-- 设置 dot 属性后，会在图标右上角展示一个小红点；设置 badge 属性后，会在图标右上角展示相应的徽标。 -->
    <!-- 通过 icon 插槽自定义图标，可以通过 slot-scope 判断标签是否选中。 -->
    <van-tabbar
      v-model="active"
      v-if="$route.meta.isShow"
    >
      <!-- Notify({ type: 'primary', message: index }); -->
      <!-- active-color="#ee0a24" inactive-color="#000"  @change="onChange" -->

      <!-- 标签栏支持路由模式，用于搭配 vue-router 使用。路由模式下会匹配页面路径和标签的 to 属性，并自动选中对应的标签。 -->
      <van-tabbar-item
        icon="home-o"
        to="/home"
      ></van-tabbar-item>
      <van-tabbar-item
        icon="friends-o"
        to="/friends"
        info="new"
      ></van-tabbar-item>
      <van-tabbar-item
        icon="cart-o"
        to="/cart"
        badge="0"
      ></van-tabbar-item>
      <van-tabbar-item
        icon="search"
        to="/search"
      ></van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data: () => ({
    active: 0, // 设置第一个亮
    title: '首页'
  }),
  methods: {
    onClickLeft() {
      this.$router.go(-1)
      // console.log('hh')
    }
  },
  // 这里是watch,不是watched
  watch: {
    $route(newVal) {
      // console.log(newVal);
      this.title = newVal.meta.title;
    }

  }
}
</script>

<style lang="scss" scoped>
.app {
  //设置上层和下层的距离
  padding-top: 46px;
  padding-bottom: 50px;
}
</style>
